<template>
  <rt-view>
    <rt-header>
      <rt-navbar :onBack="closePage">
        <span>我的</span>
      </rt-navbar>
    </rt-header>
    <rt-content>
      <main>
        <div class="main">
          <div class="top-content">
            <div class="avatar-img">
              <rt-avatar
                v-if="show"
                :size="66"
                :src="'data:image/jpeg;base64,'+ user.avatarBase64"
              >
              </rt-avatar>
              <rt-avatar
                v-if="!show"
                :size="66"
                :src="require('../../assets/imgs/avaternew.png')"
              >
              </rt-avatar>
            </div>
            <div class="name-sty">
              {{ form.name }}
            </div>
            <div class="button-sty">
              <rt-button class="button" type="sub" plain @click="editName">编辑</rt-button>
              <rt-custom-confirm
                v-model="showConfirm"
                title="修改昵称"
                @on-confirm="sureConfirm"
                confirm-text="确定"
                show-input
                :input-value="name"
                :totalCount=10
              >
                <!-- <rt-text-input
                  :disabled="isDis"
                  v-model="name"
                  style="
                    background: transparent;
                    border: #dcdfe6 solid 1px;
                    height: 10px;
                  "
                  maxlength="10"
                  required
                  placeholder="请输入昵称"
                  @focus="focus(name)"
                  @blur="blur(name)"
                /> -->
              </rt-custom-confirm>
            </div>
          </div>
          <rt-cell-group class="name-content">
            <rt-cell
              :to="{ name: 'myfavorite' }"
              title="我的收藏"
              text-align="right"
              is-link
            >
              <img
                slot="icon"
                width="22"
                height="22"
                src="../../assets/imgs/store.png"
                alt=""
              />
            </rt-cell>
            <rt-cell
              :to="{ name: 'mylike' }"
              title="我的点赞"
              text-align="right"
              is-link
            >
              <img
                slot="icon"
                width="22"
                height="22"
                src="../../assets/imgs/like.png"
                alt=""
              />
            </rt-cell>
            <rt-cell
              :to="{ name: 'opendlog' }"
              title="最近浏览"
              text-align="right"
              is-link
            >
              <img
                slot="icon"
                width="22"
                height="22"
                src="../../assets/imgs/watch.png"
                alt=""
              />
            </rt-cell>
          </rt-cell-group>
        </div>
      </main>
    </rt-content>
    <rt-footer
    >
      <rt-tabbar
        :tab-list="tablist"
        v-model="tabbar1"
        :select-color="selectColor1"
        :color="color1"
        @on-item-click="itemChange"
      />
    </rt-footer>
  </rt-view>
</template>

<script>
  export default {
    name: 'Mycenter',
    data() {
      return {
        showAvatar: false,
        showAlert: false,
        show: false,
        showConfirm: false,
        isUpdate: true,
        isDis: false,
        avaterUrl: '',
        name: '',
        form: {
          bbs_contactid: '',
          name: ''
        },
        color: '#8B9FC6',
        selectColor: '#53A4FC',
        tablist: [
          {
            name: '文章',
            img: require('@/assets/icons/svgs/article_line.svg'),
            imgActive: require('@/assets/imgs/article_active.png')
          },
          {
            name: '活动',
            img: require('@/assets/icons/svgs/activity_line.svg'),
            imgActive: require('@/assets/imgs/activity_active.png')
          },
          {
            name: '个人中心',
            img: require('@/assets/icons/svgs/mine_line.svg'),
            imgActive: require('@/assets/imgs/mycenter_active.png')
          }
        ],
        tabbar1: 2,
        color1: '#8B9FC6',
        selectColor1: '#0099FF'
      };
    },
    computed: {
      user() {
        /*if(this.$store.state.user.avatarBase64 !== ''
          && this.$store.state.user.avatarBase64 !== undefined
          && this.$store.state.user.avatarBase64.length % 4 === 0) {
            this.show = true;
        }*/
        var ava = this.$store.state.user.avatarBase64;
        if (ava === '' || ava == null || ava.length < 5) {
          // 空字符串,显示默认图片
          this.show = false;
        } else {
          // 非空,有数据
          if (ava.slice(0, 1) === '"') {
            ava = ava.slice(1, ava.length - 1);
          }
          if (ava.length % 4 === 0) {
            this.$store.state.user.avatarBase64 = ava;
            this.show = true;
          }
        }
        return this.$store.state.user;
      }
    },
    created() {
      this.init();
    },
    methods: {
      init() {
        rt.get('api/bbs/contact/info')
          .then(res => {
            this.form.name = res.nickname;
            this.name = res.nickname;
            let userInfo = {
              userId: this.user.userId,
              userCode: this.user.userCode,
              userName: this.user.userName,
              telephone: this.user.telephone,
              nickName: res.nickname,
              avatarBase64: this.user.avatarBase64,
              email: this.user.email
            };
            this.$store.commit('UPDATE_USER', userInfo);
          })
          .catch(error => {
            rt.showErrorToast(error);
          });

        // this.form.name = this.user.nickName;
        // this.name = this.user.nickName;
      },
      itemChange(value, item) {
        // console.log(value);
        if (value === 0) {
          this.$router.push({
            name: 'article-page'
          });
        } else if (value === 1) {
          this.$router.push({
            name: 'campaign-list'
          });
        }
      },
      editName() {
        this.showConfirm = true;
        this.name = this.form.name
      },
      closePage() {
        rt.closeAppPage();
      },
      focus(val) {
        console.log(val);
      },
      blur(val) {
        this.isUpdate = true;
        if (!rt.isNullOrWhiteSpace(val) && val.length > 10) {
          this.isUpdate = false;
          this.name = this.form.name;
        }
      },
      sureConfirm(val) {
        const data = {
          nickname: val
        };
        if (rt.isNullOrWhiteSpace(val)) {
          rt.showErrorToast('昵称不能为空');
          this.name = this.form.name;
          return;
        }
      rt.post('api/bbs/contact/updatename', data)
        .then((res) => {
          if (res.ErrorCode === 0) {
            rt.showSuccessToast('修改成功');
            let userInfo = {
              userId: this.user.userId,
              userCode: this.user.userCode,
              userName: this.user.userName,
              telephone: this.user.telephone,
              nickName: val,
              avatarBase64: this.user.avatarBase64,
              email: this.user.email
            };
            this.$store.commit('UPDATE_USER', userInfo);
            this.init();
          }
        })
        .catch((error) => {
          rt.alert(error);
        });
      }
    }
  };
</script>

<style lang="less" scoped>
  @deepselecter: ~'>>>';
  main {
    padding: 0 15px;

    .top-content {
      padding: 30px 0 30px 10px;
      display: flex;
      flex-direction: row;
      // line-height: 66px;
      .name-sty {
        margin-top: 20px;
        color: #555;
        font-weight: bold;
        font-size: 18px;
        margin-left: 10px;
      }
      .button-sty {
        margin-top: 20px;
        position: absolute;
        right: 4px;
      }
      .button{
        border-radius: 5px;
        background: #fff;
        width: 64px;
        height: 28px;
      }
    }

    & @{deepselecter} .rt-btn {
      margin-right: 13px;
    }
  }

  .rt-cell-group {
    box-shadow:2px 2px 6px 2px rgba(20,62,129,0.1);
    border-radius: 10px;
  }

  .rt-cell {
    font-weight: 700;
    margin-left: 2.5%;
    width: 95%;
  }

  .rt-cell @{deepselecter} .rt-cell-title-wrapper .rt-cell-title {
    font-weight: 700;
  }
</style>

<style lang="less" scoped></style>
